body{
    background-color: rgb(214, 239, 249);
}


.animated-box{
    background-color: aliceblue;
    border: solid rgb(212, 222, 232);
    text-align: center;
    text-transform: capitalize;
    width: 250px;
    padding:2px;
    margin-bottom: 25px;
    position: relative;
    animation-name: gefðu;
    animation-duration: 10s;
    animation-iteration-count: 4;
    animation-direction: left;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes gefðu{
    0%{
        left: -100%;
        opacity: 10;
        transform: scale(1.5);
    }

    90%{
        opacity: 0;
        transform: scale(1);
        left: 100%;
    }

    100%{opacity: 0;
        transform: scale(0);
        display: none;
    }
}

h1, h2, h3, h4{
    font-family: "Google Sans Code", monospace;
}

h3{
    font-size: 40px;
    text-align: center;
    padding: 1rem;
    color: rgb(253, 127, 0);
}

h1{
    font-size: 50px;
    text-align: center;
    border: solid rgb(255, 181, 9);
    background-color: rgb(255, 185, 44);
    color: rgb(194, 88, 7);
    padding: 2rem;
}
img{
    width: 100%;
}

thead{
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

tr{
    display: block;
    border-bottom: 1px solid var(--pico-color);
}

td{
    display: block;
    text-align: right;
}

td::before{
      content:attr(data-label);
      float: left;
}

nav, nav ul{
       flex-direction: column;
       color: rgb(255, 255, 255);
       font-size: 20px;
}

nav{
       background-color: rgb(147, 198, 255);
       position: fixed;
       left: -100%;
       top: 0;
       width: 100%;
       z-index: 1;
       transition: left 200ms;
}

.logo{
    width:80px;
}

input[type=checkbox]:checked + nav{
       left: 0;
}

input[type=checkbox]#menu-toggle{
       display: none;
}

.menu-btn{
       width: 50px;
       font-size: 1.4rem;
       position: fixed;
       top:0;
       right: 0;
       z-index: 2;
}


.slideshow{
    width: 70%;
    margin: auto;
}

.slides{
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.slides > div{
    background-color:  rgb(255, 251, 228);
    border: solid rgb(194, 189, 151);
    padding: 1em;
    margin-right:50px;
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
    text-align: center;
}

.slider-buttons{
    display: flex;
    justify-content: space-evenly;
}

.slider-buttons a{
    background-color:  rgb(255, 251, 228);
    color: rgb(79, 66, 65);
    width: 35px;
    height: 35px;
    text-decoration: none;
    border-radius: 50%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em ;
    border: solid rgb(194, 189, 151);
    box-shadow: 0 2px 3px rgb(127, 125, 125);
}

.slider-buttons a:active{
    box-shadow: 0 0 2px rgb(127, 125, 125);
    transform: translateY(2px);
}
.slideshow img{
    width: 100%;
}

@media (width > 768px){ 
      
    /*taflan endurgerð*/
    thead {
        display: table-header-group;
        position: relative;
        width: auto;
        overflow: visible;
    }
    td {
        display: table-cell;
        text-align: left;
    }
    /* ath! td::before data-label tekið út */
        td::before {
        content: none;
        clear: both;
        }

        tr {
        display: table-row;
        border-bottom: none;
        }
    
        .menu-btn{
              display: none;
       }

       nav{
              left: 0;
              padding: 0 1rem;
       }

       nav, nav ul{
              flex-direction: row;
       }

       body{
        margin-top: 6.5rem;
       }
}