@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&family=Roboto:wght@700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", "Roboto Mono", monospace;
}

body {
  background: rgb(0, 0, 0);
  color:aliceblue;
  overflow-x: hidden;
  width: 100%;
  height: 100%;

}

section{
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:100vh;
}

section h1{
    margin-left:200px;
    font-size:4em;
    color:rgb(255, 0, 76);
    margin-bottom: 20px;
}
section .container{
    position: relative;
    width:1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
section:nth-child(even) .container{
    flex-direction:row-reverse;
}
section .container .imgBx{
    position: relative;
    width:800px;
    height:400px;
    overflow: hidden;
    box-shadow:0 25px 35px rgba(0,0,0,0.1)
}
section .container .imgBx img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
}
section .container .content{
    position:absolute;
    right:0;
    margin-top:200px;
    margin-bottom:40px;
    padding:40px;
    background: #0008ff;
    z-index:1;
    max-width:400px;
    color:#dbd3d3;
    text-shadow:1px -1px 1px black;
    box-shadow: 0 25px 35px rgba(0,0,0,0.1);
    border-bottom: 6px solid #ff0000;
}
section:nth-child(even) .container .content{
    left:0;

}
h1{
    text-shadow: 1px -1px 2px black;
}
#lk{
    color:black;
    text-shadow:1px -1px 2px white;
}
#lv{
    color:rgb(155, 0, 175);
    text-shadow:1px 1px 2px rgb(255, 255, 255);
}
a{
    text-align: center;
    color:#0008ff;
    text-shadow: 1px -1px 2px black;

}
a:hover{
color:#fffb00;
}
a:visited{
    color:#ff0040;
}

@media only screen and (max-width:480px){
    .parallax{
        background-attachment: inherit;
    }
}