* {
    margin: 0px;
}

html { scroll-behavior: smooth; }

@media only screen and (max-width: 600px) {
  body {
    background-color: rgb(0, 0, 0);
  }
}

#creature{
    animation: move 10s infinite ease-in;
    overflow: hidden;
}

@keyframes move {
  from {transform: translateX(2000px)}
  to {transform: translateX(-1500px)}
}

#wrapper {
  background-image: url('./images/space.gif');
  height: 100vh;
  background-size: 600px;
}

#main {
    width: auto;
    position: relative;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    
 
}

#hide {
    z-index: -1;
}

#container1 {
    background: rgb(0, 0, 0);
    display: flex;
    justify-content: left;
    align-items: center;
    width: 470px;
    height: 40px;
}
#username {
    color: aliceblue;
    font-family: "DotGothic16", sans-serif;
    font-weight: 100;
    font-size: 16pt;
    padding-bottom: 5px;
    padding-left: 10px;
}
#container2 {
    display: grid;
    grid-template-columns: 150px 220px 100px;
    width: 470px;
    height: 430px;
    
    background: aliceblue;
}
#section1 {
    padding: 10px;
}
#pfp {
    width: 130px;
}
#myname {
    display: grid;
    font-family: "DotGothic16", sans-serif;
    font-weight: 800;
    font-size: 16pt;
    line-height: 18px;
    margin-bottom: 5px;
    text-align: left;
}
#Odrija {
    color: rgb(0, 0, 0);
    text-align: left;
}
#Solovjova {
    color: rgb(0, 0, 0);
    text-align: left;
}
#profession {
    display: grid;
    font-family: "Didact Gothic", sans-serif;
    font-weight: 400;
    font-size: 10pt;
    line-height: 11px;
}
#commissions {
    display: grid;
    font-family: "Didact Gothic", sans-serif;
    font-weight: 400;
    font-size: 10pt;
    line-height: 11px;
    padding-top: 5px;
}
#based {

}
#section2 {
    font-family: "Didact Gothic", sans-serif;
    padding-top: 5px;
    max-width: 200px;
}
#section3 {
    display: grid;
    justify-content: right;
    grid-template-columns: auto;
    width: 100%;
    height: min-content;
}
#mainblinkies1 {
    width: 100px;
    padding-top: 5px;
    padding-right: 10px;
}
#blinkies1 {
    margin: 2;
}
#socials {
    display: grid;
    font-family: "Didact Gothic", sans-serif;
    font-weight: 400;
    font-size: 10pt;
    line-height: 9px;
    padding-top: 10px;
} 
#paragraphmain {
    
    font-size: 11pt;
    line-height: 14px;
    margin-bottom: 5px;
   
}
/* start of illustration section*/
#illustration {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5vh;
     padding-bottom: 5vh;
    font-size: 2rem;
    background: rgb(83, 121, 153);
    background-image: url('./images/Happy\ Art\ GIF\ by\ Orla\ in\ Berlin\ \(1\).gif');
    background-size: 800px;
}
#container1illustration {
    background: rgba(254,225,27,255);
    display: flex;
    justify-content: left;
    align-items: center;
    width: 470px;
    height: 40px;
}
#h1illustration {
    color: rgb(0, 0, 0);
    font-family: "DotGothic16", sans-serif;
    font-weight: 100;
    font-size: 16pt;
    padding-bottom: 15px;
    padding-left: 10px;
}

 #container2illustration {
    width: 470px;
    height: 320px;
    display: grid;
    grid-template-columns: 300px 170px;
    justify-content: center;
    align-items: top;
    
    background: aliceblue;
}
#zine1 {
    width: 300px;
}
#paragraph1illustration {
    font-size: 11pt;
    line-height: 14px;
    margin-bottom: 5px;
    padding-left: 15px;
    font-family: "Didact Gothic", sans-serif;
}
#container3illustration {
    width: 470px;
    height: 320px;
    display: grid;
    grid-template-columns: 170px 300px;
    justify-content: center;
    align-items: center;
    
    background: rgba(254,225,27,255);
}
#zine1 {
    width: 300px;
}
#paragraph2illustration {
    font-size: 11pt;
    line-height: 14px;
    margin-bottom: 5px;
    padding-left: 25px;
    font-family: "Didact Gothic", sans-serif;
}


/*start of photography*/

/* THE START OF THE CAROUSEL*/

.gallery{
  position:relative;
  width:300px;
  height:225px;
  transform-style:preserve-3d;
  animation:rotate 55s linear infinite;
                
  top: 5vh;              
  width: 300px; 
  transform: 
  translateX(-50vw);         
}

@keyframes rotate{
  from{
    transform:perspective(1400px) rotateY(0deg);
  }
  
  to{
    transform:perspective(1400px) rotateY(360deg);
  }
}

.gallery span{
  position:absolute;
  width:100%;
  height:100%;
  transform-origin:center;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * 45deg)) translateZ(380px);
}

.gallery span img{
  position:relative;
  width: 70%;
  height:70%;
  object-fit:cover;
}

/* THE END OF THE CAROUSEL*/

#photography {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5vh;
    
    background:red ;
    
    
}

#container1photography {
    background: transparent;
    display: flex;
    justify-content: left;
    align-items: center;
    width: 470px;
    height: 40px;
}

#h1photography {
    color: rgba(254,225,27,255);
    font-family: "DotGothic16", sans-serif;
    font-weight: 100;
    font-size: 16pt;
    padding-bottom: 15px;
    padding-left: 10px;
}

#bearz {
    width: 470px;
}



#paragraph1photography {
   font-size: 11pt;
    line-height: 14px;
    margin-bottom: 5px;
    font-family: "Didact Gothic", sans-serif;
    color: aliceblue;
    text-align: end;
}

/* start of 3d*/

#threeD {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
padding-top: 5vh;
padding-bottom: 5vh;
height: auto;
    background: rgb(0, 0, 0);
    font-size: 42pt;
    background-image: url(./images/Background\ GIF\ \(1\).gif);
    background-size: 100px;
    background-position: center;
}



/* start of animation*/
#animation {
    display: flex;
    justify-content: center;
    align-items: center;
padding-top: 5vh;
    font-size: 2rem;
    background: #D80065;
    
    background-size: cover;
}
#container1animation {
    background: #D80065;
    display: flex;
    justify-content: left;
    align-items: center;
    width: 470px;
    height: 40px;
}
#h1animation {
    color: aliceblue;
    font-family: "DotGothic16", sans-serif;
    font-weight: 100;
    font-size: 16pt;
    padding-bottom: 15px;
    padding-left: 10px;
}
#container2animation {
    display: flex;
    justify-content: center;
    align-items: center;
}
#video1 {
    width: 470px;
}
#paragraph1animation {
    font-size: 11pt;
    line-height: 14px;
    margin-bottom: 5px;
    font-family: "Didact Gothic", sans-serif;
    color: aliceblue;
    text-align: end;
}

#gifs {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5vh;
    
    
    
}