body {
    padding: 0;
    margin: 0;
    background-color: #ccdbc15e;
}


header {
    background-image: url(/pexels-ekaterina-bolovtsova-6193131.jpg);
    height: fit-content;
    object-fit: contain;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-y:-100rem;
    background-blend-mode: color;
    background-attachment:local;
}
@media (max-width:450px){
    header{
        background-size: 150%;
        background-position-x: -2rem;
        background-position-y: -20rem;
    
    }
    
    
  }
  

.title {
    border-bottom: solid black;
    border-width: 5px;
    text-align: center;
    font-size: .6in;
    color: rgb(0, 0, 0);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: auto;
    padding-top:0.1cm;
    padding-bottom: .4cm;
    font-weight: bolder;
}

#sub {
    font-size: small;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.sechead {
    background-image: linear-gradient(to bottom right, #436660, #8d8e8e);
    color: aliceblue;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border: 5px solid black;
    margin: 20px 0 0 0;
    width: auto;
    font-size: larger;
    font-weight: bolder;
    text-align: center;
}

.main {
    position:relative;
    left: 19cm;
    top:120px;
    margin: auto;
    height: auto;
    margin-left:40px;
    margin-right:auto;
  
    font-size: larger;
    font-weight: bolder;
    text-align: center;
    display:inline-block;
   
}

@media (max-width: 450px) {
    .main {
           left:auto;
           right: auto;
            top:-2cm;
           justify-items: center;

    }
   .sechead{
        opacity:0%;
    }
    
  }

  

#screen{
    margin-top: 20px;
    padding-top: 3cm;
    resize: none;
    height: 1.6cm;
    direction: rtl;
    width: 8cm;
    border-radius: 4px;
    color: white;
    left: 10cm;
    font-weight: bold;
    font-size: xx-large;
    font-family: Courier new;
    padding-top: 1px;
    display: inline-flexbox;
    background-color: rgb(0, 0, 0);
    position: relative;
    left: 0px;
    top: 7px;
}

input[type="button"] {
    height: 1.6cm;
    font-family: Lato, Helvetica, sans-serif;
    font-weight: bold;
    width: 2cm;
    box-shadow: #436660;
    font-size: larger;
    display: inline-flexbox;
    border-radius: 10px;
    border-color: rgb(232, 203, 151);
    cursor: pointer;
    transition: .4s ease-in-out; 
   

}

input[type="button"]:hover {
    background-color: rgb(238, 217, 191);
    color: black; 
    transition:ease-in-out;
}

input[type="button"]:active {
    background-color: rgb(215, 97, 18);
    color: black;
}


table {
    
    padding:auto;
    margin-top:10px;
    margin:auto;
}

.clearbtn {
    background-color: rgb(215, 97, 18);
    width: 10cm;
    top:8px;
    left:120px;
    margin: auto;
    position:relative;
    display: inline-block;
    border-radius: 40px;
    margin-top: 18px;

}


.clearbtn:hover {
    color: black;
    background-color: rgb(153, 203, 153);
}


.sideheading{
    display: inline-block;
    left:12cm;
   position: relative;
   
}