@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,500&display=swap');

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
    background-size:100%;
    background-size:cover;
    margin-top:20px;
    background-color: #fff;
}

fieldset{
    border:none;
}

label{
    float:left;
    text-indent:-99999px;
}

input{
    width:85%;
    margin-right:1%;
    height:2em;
    font-size:1.6em;
    float:left;
}

h3,dl,dd,dt{
    margin:1em 2em;
}

h2{
    margin:1em;
    font-size:xx-large;
}

dt{
    font-weight:bold;
}


p{
    line-height:1.6;
    margin:1em 2em;
}

p.intro{
    clear:both;
}

a{
    color:#fc0808;
    text-decoration:none;
    transition:all 1s ease;
}

a:hover{
    color:#cc4e46;
    background-color:#ede6dc;
}

a.button{
    background-color:#ede6dc;
    color:#cc4e46;
    width:8%;
    line-height:1.7em;
    margin:0;
    font-size:2em;
    text-align:center;
    float:left;
    border:solid 1px #8e352e;
    box-shadow:0 0 3px #333;
}

a.button:hover{
    background-color:#cc4e46;
    color:#ede6dc;
}

h1{
    text-transform:uppercase;
    text-align:center;
}

.wrapper{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

.display{
    position:relative;
    height:738px;
}
/*
.display.fullscreen {
  height: 100%;
  max-width: 1800px;
  position: fixed;
  margin: 0 0 0 0;
}*/

.makale{
    float:left;
    width:100%;
    margin:0 auto;
    box-shadow:0px -2px 5px #333;
}

form{
    width:85%;
    margin:1em auto;
}

div{
    background-repeat:no-repeat;
    background-size:100%;
    overflow:hidden;
}

iframe{
    transform:scale(0.219);
    -webkit-transform:scale(0.219);
    -o-transform:scale(0.219);
    -ms-transform:scale(0.219);
    -moz-transform:scale(0.219);
    transform-origin:top left;
    -webkit-transform-origin:top left;
    -o-transform-origin:top left;
    -ms-transform-origin:top left;
    -moz-transform-origin:top left;
    margin:0;
    padding:0;
    position:relative;
    background-color:#fff;
}

.mobile{
    background-image:url("../images/iphone-optimised.png");
    position:absolute;
    width:95px;
    height:182px;
    top:475px;
    left:300px;
    z-index:5;
}

.mobile iframe{
    width:393px;
    height:766px;
    top:12px;
    left:5px;
    overflow-y:hidden;
    border-radius:30px 30px 65px 65px;
}

.tablet{
    background-image:url("../images/ipad-optimised.png");
    width:246px;
    height:311px;
    z-index:3;
    position:absolute;
    left:120px;
    top:330px;
}

.tablet iframe{
    width:998px;
    height:1323px;
    top:11px;
    left:12px;
    overflow-y:hidden;
    border-radius:30px;
}

.laptop{
    background-image:url("../images/laptop-screen-optimised.png");
    width:477px;
    height:275px;
    top:364px;
    left:560px;
    position:absolute;
    z-index:2;
}

.laptop iframe{
    width:1311px;
    height:821px;
    top:15px;
    left:55px;
    border-radius:25px;
    transform:scale(0.277);
    -webkit-transform:scale(0.277);
    -o-transform:scale(0.277);
    -ms-transform:scale(0.277);
    -moz-transform:scale(0.277);
    transform-origin:top left;
    -webkit-transform-origin:top left;
    -o-transform-origin:top left;
    -ms-transform-origin:top left;
    -moz-transform-origin:top left;
}

.desktop{
    position:absolute;
    width:566px;
    height:481px;
    background-image:url("../images/large-screen-optimised.png");
    top:100px;
    left:220px;
    z-index:1;
}

.desktop iframe{left:25px;
    top:25px;
    width:1615px;
    height:1010px;
    border-radius:20px;
    transform:scale(0.3181);
    -webkit-transform:scale(0.3181);
    -o-transform:scale(0.3181);
    -ms-transform:scale(0.3181);
    -moz-transform:scale(0.3181);
    transform-origin:top left;
    -webkit-transform-origin:top left;
    -o-transform-origin:top left;
    -ms-transform-origin:top left;
    -moz-transform-origin:top left;
}

.about-tool{
    font-size:1.2em;
    max-width:64em;
    width:80%;
    margin:1em auto
}

.about-tool li{
    margin-bottom:0.5em;
    line-height:1.2;
}

@media (max-width: 1160px){
    .display{
        width:95%;
        height:550px;
        transform:scale(0.81);
        -webkit-transform:scale(0.81);
        -o-transform:scale(0.81);
        -ms-transform:scale(0.81);
        -moz-transform:scale(0.81);

}
.desktop{
    left:180px;
}
.laptop{
    left:520px;
}
.tablet{
    left:80px;
}
.mobile{
    left:260px;
}
input{
    width:88%;
} }

@media (max-width: 1070px){
    .display{
        left:-50px;
    } }

@media (max-width: 1000px){
    .display{
        height:500px;
        transform:scale(0.71);
        -webkit-transform:scale(0.71);
        -o-transform:scale(0.71);
        -ms-transform:scale(0.71);
        -moz-transform:scale(0.71);
        top:-40px;

    }
.desktop{
    left:140px;
}
.laptop{
    left:480px;
}
.tablet{
    left:40px;
}
.mobile{
    left:220px;
} }

@media (max-width: 850px){
    .display{
    height:500px;
    transform:scale(0.65);
    -webkit-transform:scale(0.65);
    -o-transform:scale(0.65);
    -ms-transform:scale(0.65);
    -moz-transform:scale(0.65);
}
.desktop{
    left:100px;
}
.laptop{
    left:440px;
}
.tablet{
    left:0px;
}
.mobile{
    left:180px;
} }

@media (max-width: 768px){
    .display{
        height:450px;
        transform:scale(0.55);
        -webkit-transform:scale(0.55);
        -o-transform:scale(0.55);
        -ms-transform:scale(0.55);
        -moz-transform:scale(0.55)}

a.button{
    font-size:1.6em;
    line-height:1.75em;
    margin-top:0.5em;
    width:100%
}
input{
    height:1.2em;
    width:100%
} }

@media (max-width: 670px){
    .display{
        height:400px;
        left:-70px;
        transform:scale(0.45);
        -webkit-transform:scale(0.45);
        -o-transform:scale(0.45);
        -ms-transform:scale(0.45);
        -moz-transform:scale(0.45);
    } }

@media (max-width: 580px){
    input{
        font-size:1.4em;
        height:1.4em;
        width:100%;
     }

a.button{
    width:100%;
    float:left;
    font-size:1.4em;
    margin-top:0.5em;
} }

@media (max-width: 560px){
    .display{
        height:270px;
        top:-65px;
        transform:scale(0.37);
        -webkit-transform:scale(0.37);
        -o-transform:scale(0.37);
        -ms-transform:scale(0.37);
        -moz-transform:scale(0.37);
    } }

@media (max-width: 440px){
    .display{
        left:-17px;
        top:-65px;
        width:70px;
        transform:scale(0.35);
        -webkit-transform:scale(0.35);
        -o-transform:scale(0.35);
        -ms-transform:scale(0.35);
        -moz-transform:scale(0.35);
    } }

@media (max-width: 380px){
    .display{
        height:235px;
        left:-17px;
        top:-65px;
        width:70px;
        transform:scale(0.27);
        -webkit-transform:scale(0.27);
        -o-transform:scale(0.27);
        -ms-transform:scale(0.27);
        -moz-transform:scale(0.27);
    }

.desktop{
    left:100px;
}
.laptop{
    left:515px;
}
.tablet{
    left:0px;
}
.mobile
{
    left:180px;
}
h1{
    font-size:1.2em;
}
p{
    margin:1em;
} }


header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
h1 {
    margin: 0;
}
section {
    padding: 10px;
    margin: 0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
    color: #fff;
}
ul {
    list-style-type: none;
    padding-left: 0;
}
li {
    margin-bottom: 10px;
}
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}
@media screen and (max-width: 728px) {
  .about-tool {
    width: 85%;
    max-width: 90%;
}
h2 {
    font-size: larger;
}
.buttons button {
    width: 100% !important;}
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
    #rwdform a.button {
        width: 20%;
    }
    #rwdform input#url {
        width: 75%;
    }
}

/*button tasarımı*/
.buttons button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 10px 10px;
    border: none;
    cursor: pointer;
    width: 35%;
    font-size: x-large;
}

.buttons {
    text-align: center;
}

button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    transition: all 0.6s ease;
}

#dark-light {
    position: fixed;
    bottom: 0rem;
    right: 5rem;
    border: none;
    background-color: transparent;
    width: 8rem;
    height: 8rem;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: width, 0,6s;
}

#dark-light:hover {
    box-shadow: none
}

button.dark#dark-light {
    background-image: url("../images/dark.png");
}

button.light#dark-light {
    background-image: url("../images/light.png");

}

body.dark {
    background-color: #333;
    color: #fff;
}

body.light {
    background-color: #fff;
    color: #333;
}

input.dark {
    background-color: #333;
    color: #fff;
}

input.light {
    background-color: #fff;
    color: #333;
}