html {
  background-color: #aad5e2;
background-image: url("https://camilasc.com/img/meta/clouds.gif");
}

body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}
/*
@media only screen and (min-width: 1280px){
body {
     margin: 4vh 12vw !important;
}
}*/

.containerflx {
    display: flex;
    flex-wrap: wrap;
}

.sign {
width: 760px;
height: 900px;
    background-image: url("https://camilasc.com/img/SIGN-t.gif");
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size:contain; /* Resize the background image to cover the entire container */
    color:#524e4b;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sign p{
    padding: 10px;
    font-size: 130%;
}

/*no border on mobile*/
@media only screen and (max-width: 768px) {
    .sign {
      height: 100%;
      font-size: 0.7rem;
      padding: 0;
    }
    }
@media only screen and (max-width: 768px) {
        .sign p{
            max-height: 30px;
        }
        }
      
.window {
    height: auto;
    position:relative;
    margin-left: 0vw;
    width: 760px;
    height: 900px;
    background-image: url("https://camilasc.com/img/window-t.gif");
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size:contain; /* Resize the background image to cover the entire container */
}

.window:hover  {
    background-image: url("https://camilasc.com/img/windowopen-t.gif");
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size:contain; /* Resize the background image to cover the entire container */
}


.windowclass {
        position:absolute; 
        width:100%;
        height:100%;
        top:0;
        left: 0;
        z-index: 1;
      
        /* fixes overlap error in IE7/8, 
           make sure you have an empty gif */
        background-image: url('https://camilasc.com/img/empty.gif'); 
}


@media only screen and (max-width: 768px) {
    .window{
        background-image: url("https://camilasc.com/img/windowopen-t.gif");
        height: 500px;
    }
    }
  

.accesibility {
    width: 30%;
    margin-left: 30%;
    height: 300px;
    margin-top:60%;
    font: 1em;

}

@media only screen and (max-width: 768px) {
        .accesibility{
            width: 40%;
            font-size: 0.8em;
            margin-top:66%;
        }
        }
      
.webrings 
{   text-align: center;
    margin: auto;
    width: 70%;
    padding: 100px;
    font-size: 2em;
}

.webrings a:hover {
color: green;
}

@media only screen and (max-width: 768px) {
    .webrings{
        margin:0;
        padding: 0;
        width: 95%;
    }
    }
  
    /*enter website button animation*/

    
.enter button{
    width:300px;
    height:70px;
    margin-left: 100px;
    background-color: #534d4c;
    border-style: none;
    color:#fff;
    font-size: 23px;
    letter-spacing: 3px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    position: relative;
    padding: 0px;
    overflow: hidden;
    transition: all .5s;
    box-shadow: 0px 1px 2px rgba(0,0,0,.2);

}


.enter button a {
  /* visited link */
  a:visited {
    color: white;
  }
  
  /* mouse over link */
  a:hover {
    color: hotpink;
  }
  
  /* selected link */
  a:active {
    color: blue;
  } 
}


/*for mobile*/
@media only screen and (max-width: 768px) {
    .enter button {
        margin-left: 12.5vw;
        margin-top: 14%;
    }
  }

  /*for desktop*/
  
  @media only screen and (min-width: 768px) {
    .enter button {
        margin-left: 220px;
        margin-top: 135px;
    }
  }
  
button span{
    position: absolute;
    display: block;
}
button span:nth-child(1){
    height: 4px;
    width:300px;
    top:0px;
    left:-300px;
    background: linear-gradient(to right, rgba(0,0,0,0), #f6e58d);
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span1 2s linear infinite;
    animation-delay: 1s;
}

@keyframes span1{
    0%{
        left:-300px
    }
    100%{
        left:300px;
    }
}
button span:nth-child(2){
    height: 70px;
    width: 4px;
    top:-70px;
    right:0px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), #f6e58d);
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span2 2s linear infinite;
    animation-delay: 2s;
}
@keyframes span2{
    0%{
        top:-70px;
    }
    100%{
        top:7px;
    }
}
button span:nth-child(3){
    height:4px;
    width:300px;
    right:-300px;
    bottom: 0px;
    background: linear-gradient(to left, rgba(0,0,0,0), #f6e58d);
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    animation: span3 2s linear infinite;
    animation-delay: 3s;
}
@keyframes span3{
    0%{
        right:-300px;
    }
    100%{
        right: 300px;
    }
}

button span:nth-child(4){
    height:70px;
    width:4px;
    bottom:-70px;
    left:0px;
    background: linear-gradient(to top, rgba(0,0,0,0), #f6e58d);
    border-top-right-radius: 1px;
    border-top-left-radius: 1px;
    animation: span4 2s linear infinite;
    animation-delay: 4s;
}
@keyframes span4{
    0%{
        bottom: -70px;
    }
    100%{
        bottom:70px;
    }
}

button:hover{
    transition: all .5s;
    transform: rotate(-3deg) scale(1.1);
    box-shadow: 0px 3px 5px rgba(0,0,0,.4);
}
button:hover span{
    animation-play-state: paused;
}

.door {
    height: auto;
    position:relative;
    margin-left: 0vw;
    width: 760px;
    height: 900px;
    background-image: url("/img/meta/door.gif");
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size:contain; /* Resize the background image to cover the entire container */
}


.door img {
    width: 760px;
    height: 900px;
}

/*
.window:hover  {
    background-image: url("https://camilasc.com/img/windowopen-t.gif");
    background-repeat: no-repeat; /Do not repeat the image 
    background-size:contain; Resize the background image to cover the entire container 
}*/


.windowclass {
        position:relative;
        width:100%;
        height:100%;
        top:0;
        left: 0;
        z-index: 1;
      
        /* fixes overlap error in IE7/8, 
           make sure you have an empty gif */
        background-image: url('https://camilasc.com/img/empty.gif'); 
}


@media only screen and (max-width: 768px) {
    .window{
        background-image: url("https://camilasc.com/img/windowopen-t.gif");
        height: 500px;
    }
    }