video {
    position: absolute;
    top: 0;
    left: 0;
    
    object-fit: cover;
    height:100%;
    width: 100%;
    z-index: -1;
}

.video-wrapper {
     /* Telling our absolute positioned video to 
  be relative to this element */
  position: relative;

  width: 400px;
  height: 200px;

  /* Will not allow the video to overflow the 
  container */
  overflow: hidden;

  /* Centering the container's content vertically 
  and horizontally */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.climate-crisis-<uniquifier> {
  font-family: "Climate Crisis", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "YEAR" 1979;
}

.special-elite-regular {
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
}


h1.homepage{
    font-family: "Climate Crisis", sans-serif;
    color: rgb(255, 0, 0);
    font-size: 86px;
    letter-spacing: 4px;

    display: inline-block;
    position: relative;
    left: 50px;
    top: 280px;

    margin: 0px;
    z-index: -1;
}

li.aboutme{

    display: block;
    width: 109px;

    list-style: none;
    padding: 2px;
    background-image: url("https://files.catbox.moe/pnh65r.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 109px;
    text-align: center;
}

li.portfolio{

    display: block;
    width: 109px;

    list-style: none;
    padding: 2px;
    background-image: url("https://files.catbox.moe/b75h2b.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 109px;
    text-align: center;
}

li.personalwork{

    display: block;
    width: 152px;

    list-style: none;
    padding: 2px;
    background-image: url("https://files.catbox.moe/w8siio.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 152px;
    text-align: center;
}

li.lifedrawing{

    display: block;
    width: 152px;

    list-style: none;
    padding: 2px;
    background-image: url("https://files.catbox.moe/xsbn1n.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 152px;
    text-align: center;
}

li.contact{
    display: block;
    width: 109px;

    list-style: none;
    padding: 2px;
    background-image: url(https://files.catbox.moe/pyn7d3.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 109px;
    text-align: center;
}

.child li:hover {
    transform: translatex(15px);
}

.homepage-container {
  display:inline-flex;
  position: relative;
  top:450px;
  right:560px;
}

.child{
  display:inline-flex;
  flex: 1; /* additionally, equal width */
}

  ul{
  display:inline;
  margin:0px;
  padding:0px;
  position:relative;
  right:1%;
}

.child a{
    font-family:"Special Elite", system-ui;
    text-decoration: none;
    color: black;
}

.child img{
  position:relative;
  right:0.5%
}

iframe{
    display: block;
    margin: 0 auto;
    padding-top: 50px;
    width:500px
}

.header h1 {

    display: inline;
    position: relative;
    left: 10px;
}
.header h1 a{
    font-family: "Climate Crisis", sans-serif;
    color: rgb(255, 0, 0);
    font-size: 30px;
    letter-spacing: 3px;
    text-decoration:none;
}

div.header{
    height: 70px;
    background-image: url("https://files.catbox.moe/frn0dd.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}

div.headermenu{
    text-align: left;
}  

.headermenu span {

}

.menuheader a{
    font-family:"Special Elite", system-ui;
    text-decoration: none;
    color: black;
    padding: 10px;
    background-color:#f6c585 ;
}


.sociallinks img{
    width: 30px
}

.sociallinks a{
    padding-right:10px;
}

div.sociallinks{
    text-align:right;
    position: relative;
    bottom:20px;
    right:20px;
}

div.footer {
    text-align: center;
    padding:50px;
}

.footer img{
    width: 30px
}

.footer a{
    padding-right:10px
}

.base{
    background-image: url(https://files.catbox.moe/7pcz2w.gif);
    background-size: 100%;
}

.title{
    font-family:"climate crisis", sans-serif;
    font-weight: lighter;
    color: antiquewhite;
    font-size: 40px;
    display: block;
    text-align: center;
    padding-top: 50px;
}

.title2{
    font-family:"climate crisis", sans-serif;
    font-weight: lighter;
    color: antiquewhite;
    font-size: 20px;
    display: block;
    text-align: left;
    padding-top: 30px;
}

p.basic {
    font-family:"Special Elite", system-ui;
    color: antiquewhite;
    font-size: 15px;
}

.basic a{
  color: lightskyblue;
}

div.subheader{
  text-align: center;
}


/* gallery css for grid*/

div.gallery{
  padding-top: 50px;
  display: block;
  margin: 0px;
}

.gallery{
  margin: 10px 50px;
}

.gallery img{
  transition: 0.5s;
  padding: 15px;
  height: 500px;
}

.gallery img:hover{
  transform: scale(1.1)
}

/* gallery css for portfolio */

div.gallery2{
  padding-top: 50px;
  display: block;
  margin: 0px;
}

.gallery2{
  margin: 10px 50px;
}

.gallery2 img{
  transition: 0.5s;
  padding: 15px;
  width: 500px;
}

.gallery2 img:hover{
  transform: scale(1.1)
}


/* contact form starts here */

.contact-container{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content:space-evenly;
}

.contact-left{
    display:flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}

.contact-left-title h2{
    font: weight 10px;
    margin-bottom: 10px;
    font-family:"Special Elite", system-ui;
    color: antiquewhite;
    font-size: 24px;
}

.contact-inputs{
    width:400px;
    height:50px;
    border: none;
    outline: none; 
    padding-left:25px;
    font-weight:500;
}

.contact-left textarea{
    height: 140px;
    padding-top:15px;
}

.contact-left button{
    background-image: url(https://files.catbox.moe/pnh65r.png);
    font-family:"Special Elite", system-ui;
    color: black;
    font-size: 16px;
    background-position: right;
    align-items: center
    border: none;
}

.contact-inputs::placeholder{
    font-family:"Special Elite", system-ui;
    color:light grey;
    font-size: 16px;d
}

@media (max-width:800px){
    .contact-inputs{
        width:80vw;
    }
    .contact-right{
        display: none;
    }
}



.aboutme-container{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content:space-evenly;
}


.aboutme-left{
    display:flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    width: 50vw;
}

p.aboutme {
    font-family:"Special Elite", system-ui;
    color: antiquewhite;
    font-size: 14px;
    line-height: 1.5;
}