@import url('https://fonts.cdnfonts.com/css/pokemon-solid');

:root { 
    /*main colours*/
    --background: rgb(201, 215, 236);
    --red: rgb(235, 55, 55);
    --darker-red: rgb(152, 43, 43);
    --red-btn: rgb(255, 3, 3);
    --blue-btn: rgb(32, 99, 233);
    --yellow-btn: rgb(183, 183, 48);
    --green-btn: rgb(93, 218, 93);
    --pokedex-screen-border: rgb(184, 184, 184);
    --orange-btn: rgb(255, 106, 0);
    --enter-window: rgb(30, 159, 30);
    --black-btn: rgb(45, 45, 45);
    --black-btn-text: #873232;
    --light-blue-btn: rgb(52, 235, 232);
    
    --poke-font: 'Courier New', Courier, monospace;
}

.darker-red {
    background-color: var(--darker-red);
}

.red {
    background-color: var(--red);
}

html {
    background-color: var(--background);
}

h1 {
    text-align: center;
    margin-top: 20px;
    font-family: 'Pokemon Solid', sans-serif;
    color: rgb(242, 255, 0);
    text-shadow: #0033dc 4px 5px 3px ;
    
}

body {
    font-size: 18px;
    margin: 0 auto;
    width: 40%;
    min-width: 800px;
}

#first-half {
    width: 350px;
    height: 550px;
    position: absolute;
    border: solid 3px var(--darker-red);
    border-radius: 5px;
    margin-left: 23px;
}

#first-header {
    position: absolute;
    width: 170px;
    height: 100px;
    border-bottom-right-radius: 50px;
}

#header-dark {
    position: absolute;
    width: 190px;
    height: 60px;
    margin-left: 160px;
}

#header-red {
    position: absolute;
    width: 190px;
    height: 50;
    margin-top: 40px;
    margin-left: 160px;
    border-top-left-radius: 50px;
}

#blue-cir {
    position: absolute;
    border: solid aliceblue 4px;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background-color: var(--light-blue-btn);
    margin-top: 20px;
    margin-left: 10px;
}

#red-cir {
    background-color: var(--red-btn);
}

#yellow-cir {
    background-color: var(--yellow-btn);
}

#green-cir {
    background-color: var(--green-btn);
}

#red-cir, #yellow-cir, #green-cir {
    height: 15px;
    width: 15px;
    border: 2px solid rgba(0, 0, 0, 0.629);
    border-radius: 50%;
    position: relative;
}

#small-cirles {
    width: 80px;
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    margin-top: 20px;
    margin-left: 70px;
}

#first-mid {
    position: absolute;
    width: 350px;
    height: 300px;
    margin-top: 102px;
}

#screen-poke-border {
    background-color: var(--pokedex-screen-border);
    border: solid 3px gray;
    border-radius: 23px;
    width: 300px;
    height: 270px;
    margin-top: 10px;
    margin-left: 25px;
}

#screen-poke {
    background-color: rgb(255, 255, 255);
    border: solid 3px gray;
    border-radius: 23px;
    width: 260px;
    height: 220px;
    margin-top: 10px;
    margin-left: 19px;
}

#red-small-btns {
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    width: 90px;
    margin-top: -1px;
    margin-left: 105px;
}

#red-small-btn1, #red-small-btn2 {
    background-color: var(--red-btn);
    height: 7px;
    width: 7px;
    border: 1px solid rgba(0, 0, 0, 0.629);
    border-radius: 50%;
    position: relative;
}

#data-container {
    font-family: var(--poke-font);
    margin: 8px;
}

#name-id {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    margin-top: -20px;
    font-weight: 650;
}

#weight,
#height,
#types {
        margin-top: -16px;
        font-size: 14px;
        font-weight: 550;
}

#types span {
    display: inline-block;
    border-radius: 5px;
    padding: 0 8px;
}

#sprite {
    display: block;
    margin: 0 auto;
}

#red-big-btn {
    position: absolute;
    background-color: var(--darker-red);
    height: 25px;
    width: 25px;
    border: 1px solid rgba(0, 0, 0, 0.629);
    border-radius: 50%;
    margin-top: 5px;
    margin-left: 35px;
}

#gray-long {
    position: absolute;
    display: flex;
    flex-flow: row wrap;
    width: 70px;
    height: 30px;
    margin-top: 4px;
    margin-left: 180px;
    column-gap: 7px;
}

.gray-long-btn {
    background-color: rgb(43, 44, 43);
    width: 25px;
    height: 2px;
    padding-bottom: 1px;
}

#triangle-corner {
    border-left: 35px solid transparent; 
    border-right: 35px solid var(--red); 
    border-top: 35px solid transparent; 
    border-bottom: 35px solid transparent; 
    height: 0; 
    width: 0; 
    rotate: 315deg;
    margin-top: -25px;
    margin-left: -15px;
}

#first-footer {
    position: absolute;
    width: 350px;
    height: 150px;
    margin-top: 402px;
}

#big-blue-btn {
    position: absolute;
    border: solid black 2px;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background-color: var(--blue-btn);
    margin-top: 20px;
    margin-left: 10px;
}

#long-green-btn {
    position: absolute;
    background-color: var(--green-btn);
    margin-top: 20px;
    margin-left: 80px;
}

#long-orange-btn {
    position: absolute;
    background-color: var(--orange-btn);
    margin-top: 20px;
    margin-left: 155px;
}

#long-green-btn, 
#long-orange-btn, 
#long-btn-second-one, 
#long-btn-second-two {
    width: 60px;
    height: 10px;
    border: solid black 2px;
    border-radius: 9px;
}

#enter-btn {
    position: absolute;
    width: 130px;
    height: 50px;
    border: ridge var(--enter-window) 3px;
    background-color: var(--enter-window);
    border-radius: 3px;
    margin-top: 50px;
    margin-left: 80px;
}

#search-input {
    width: 130px;
    height: 50px;
    background-color: var(--enter-window);
    color: aliceblue;
    font-family: var(--poke-font);
    font-size: 16px;
    text-align: center;
}

#search-input::placeholder {
    color: aliceblue;
    font-family: var(--poke-font);
    font-size: 16px;
    text-wrap: wrap;
    position: absolute;
    margin-top: -10px;
    text-align: start;
}

#black-btn {
    position: absolute;
    margin-top: 20px;
    margin-left: 240px;
    width: 80px;
    height: 80px;
}

#up-down-btn {
    background-color: var(--black-btn);
    width: 20px;
    height: 80px;
    border-radius: 5px;
    margin-left: 30px;
}

#search-button {
    background-color: var(--black-btn);
    width: 60px;
    height: 20px;
    margin-left: 10px;
    margin-top: -20px;
    border: none;
    color: var(--black-btn-text);
    font-weight: 700;
    font-family: var(--poke-font);
    font-size: 16px;
    text-align: center;
}

#search-button:hover {
    color: var(--light-blue-btn);
}

#left-right-btn {
    background-color: var(--black-btn);
    width: 80px;
    height: 20px;
    border-radius: 5px;
    margin-top: -50px;
}

#fixator {
    width: 40px;
    height: 550px;
    position: relative;
    margin: 0 auto;
    border: solid 3px var(--darker-red);
    border-radius: 5px;
}

#fixator .darker-red {
    width: 40px;
    height: 50px;
}

#darker-red-short1 {
    position: absolute;
}

#red1 {
    position: absolute;
    margin-top: 50px;
    width: 40px;
    height: 250px;
}

#darker-red-short2 {
    position: absolute;
    margin-top: 100px;
}

#red2 {
    position: absolute;
    margin-top: 150px;
    width: 40px;
    height: 300px;
}

#darker-red-short3 {
    position: absolute;
    margin-top: 450px;
}

#red3 {
    position: absolute;
    margin-top: 500px;
    width: 40px;
    height: 50px;
}

#second-half {
    width: 350px;
    height: 500px;
    position: abrsolute;
    border: solid 3px var(--darker-red);
    border-radius: 5px;
    margin-top: -504px;
    margin-left: 420px;
}

#second-header {
    width: 350px;
    height: 55px;
    position: abrsolute;
    margin-top: -8px;
    margin-left: -1px;
}

#header-red-second {
    position: absolute;
    width: 180px;
    height: 70;
    margin-left: 1px;
    border-top-right-radius: 50px;
    z-index: 2;
}

#covering-box {
    position: absolute;
    width: 70px;
    height: 70px;
    background-color: var(--background);
    margin-left: 110px;
    z-index: 0;
}

#header-oval-second {
    background-color: var(--background);
    position: absolute;
    width: 200px;
    height: 65;
    margin-left: 168px;
    border-bottom-left-radius: 50px;
    z-index: 1;
}

#info-screen {
    position: absolute;
    background-color: rgb(0, 0, 0);
    border: solid 1px rgb(0, 0, 0);
    border-radius: 23px;
    width: 300px;
    height: 240px;
    margin-top: 15px;
    margin-left: 23px;
    z-index: 2;

}

table {
    margin-top: 10px;
    margin-left: 20px;
    color: white;
    font-family: var(--poke-font);
    width: 260px;
    height: 215px;
}

#blue-btns {
    width: 260px;
    height: 50px;
    margin-top: 270px;
    margin-left: 42px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    row-gap: 0.1px;
}

.blue-square-btn {
    background-color: var(--blue-btn);
    width: 50px;
    height: 30px;
    border: 1px black solid;
    border-radius: 5px;
}

#small-green-cir,
#small-yellow-cir {
    position: relative;
    width: 10px;
    height: 10px;
    border: 2px #000 solid;
    border-radius: 50%;    
}

#small-green-cir{
    background-color: var(--green-btn);
    position: absolute;
    margin-left: 45px;
    margin-top: 20px;
}

#small-yellow-cir {
    background-color: var(--yellow-btn);
    position: absolute;
    margin-left: 79px;
    margin-top: 20px;
}

#long-btn-second-one {
    position: absolute;
    background-color: var(--green-btn);
    margin-left: 160px;
    margin-top: 20px;
}

#long-btn-second-two {
    position: absolute;
    background-color: var(--orange-btn);
    margin-left: 238px;
    margin-top: 20px;
}

#white-btn1,
#white-btn2 {
    position: absolute;
    width: 50px;
    height: 20px;
    background-color: aliceblue;
    border: #000 1px solid;
    border-radius: 5px;
}

#white-btn1 {
    margin-left: 45px;
    margin-top: 50px;
}

#white-btn2 {
    margin-left: 97px;
    margin-top: 50px;
}

#red-triangle-small-one {
    border-left: 9px solid transparent; 
    border-right: 9px solid var(--darker-red); 
    border-top: 9px solid transparent; 
    border-bottom: 9px solid transparent; 
    height: 0; 
    width: 0; 
    margin-left: 10px;
    margin-top: 2px;
}

#red-triangle-small-two {
    border-left: 9px solid var(--darker-red); 
    border-right: 9px solid transparent; 
    border-top: 9px solid transparent; 
    border-bottom: 9px solid transparent; 
    height: 0; 
    width: 0; 
    margin-left: 23px;
    margin-top: 2px;
}

#big-yellow-btn-cir {
    position: absolute;
    width: 25px;
    height: 25px;
    border: solid 2px black;
    border-radius: 50%;
    margin-left: 272px;
    margin-top: 48px;
    background-color: var(--yellow-btn);
}

#long-btn-yellow-one,
#long-btn-yellow-two {
    position: absolute;
    background-color: var(--black-btn);
    width: 110px;
    height: 30px;
    border: 2px solid black;
    border-radius: 5px;
}

#long-btn-yellow-one {
    margin-left: 55;
    margin-top: 85px;
}

#long-btn-yellow-two {
    margin-left: 175;
    margin-top: 85px;
}

/*Pokemon types*/

.normal {
    background-color: #9d9d9c;
}
  
.fire {
    background-color: #ff0000dc;
}

.water {
    background-color: #054ff0c7;
}

.electric {
    background-color: #fff700;
}

.grass {
    background-color: #3bc002;
}

.ice {
    background-color: #00fffb;
}

.fighting {
    background-color: #ff8400;
}

.poison {
    background-color: #8422a5;
}

.ground {
    background-color: #8b3101be;
}

.flying {
    background-color: #88edff;
}

.psychic {
    background-color: #ec2e7ac9;
}

.bug {
    background-color: #bad019;
}

.rock {
    background-color: #baaa66;
}

.ghost {
    background-color: #7a379bd7;
}

.dragon {
    background-color: #2811d8a6;
}

.dark {
    background-color: #3a237bc0;
}

.steel {
    background-color: #686588;
}

.fairy {
    background-color: #f061f0;
}