/* full resets */
* {
  padding: 0;
  margin: 0;
}

.body {
overflow: hidden;
}

/* container */
#container {
  background-image: url('https://i2.wp.com/bunnygaming.com/wp-content/uploads/2021/09/rsz_image_2021-09-24_105446.jpg?resize=1068%2C601&ssl=1');
/*  dyanmic background image sizing  */
  background-size: 100vw 100vh;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;;
}

/* top half */
#monster-display {
flex-direction: column;
align-items: center;
justify-content: center;
  display: none;
  height: 100vh;
  width: 100vw;
  padding-bottom: 5px;
}

#monster-card-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100vh;
  width: 100vw;
  position: relative;
  z-index: 1;
}

#monster-card-header {
  transform: translateY(50px);
height: 20vh;
color: white;
text-shadow: 0 0 5px #dc143c, 0 0 15px #b19cd9;
text-align: center;
}

#monster-card {
background: rgba(0,0,0,1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}

#monster-card-body {
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0,0,0,1);
height: 40vh;
width: 100%;
max-width: 500px;
padding: 0;
margin: 0;
}

#card-body-img {
height: 40vh;
width: 100%;
max-width: 500px;
}

#star-1, #star-2, #star-3, #star-4, #star-5, #star-6, #star-7, #star-8, #star-9, #star-10 {
display: none;
}

#weakness-fire, #weakness-ice, #weakness-water, #weakness-dragon, #weakness-thunder, #resistance-fire, #resistance-ice, #resistance-water, #resistance-dragon, #resistance-thunder {
display: none;
}

#weakness-fire, #resistance-fire {
color: red;
text-shadow: 0 0 5px lightRed;
}

#weakness-ice, #resistance-ice {
color: lightBlue;
text-shadow: 0 0 5px lightSkyBlue;
}

#weakness-water, #resistance-water {
color: blue;
text-shadow: 0 0 5px lightBlue;
}

#weakness-thunder, #resistance-thunder {
color: yellow;
text-shadow: 0 0 5px lightYellow;
}

#weakness-dragon, #resistance-dragon {
color: #3B2042;
text-shadow: 0 0 5px white;
}

#threat-level {
color: gold;
font-size: 20px;
text-shadow: 0 0 10px white;
}

#monster-weakness {
  color: white;
font-size: 20px;
text-shadow: 0 0 10px white;
}

#monster-resistance {
    color: white;
font-size: 20px;
text-shadow: 0 0 10px white;
}


.fa-solid .fa-star {
  color: gold;
height: 50px;
font-size: 26px;
text-shadow: 0 0 10px white;
}

#monster-card-footer {
  transform: translateY(-80px);
height: 20vh;
text-align: center;
}


#monster-logo {
z-index: 2;
position: absolute;
top: 10px;
right: 10px;
}

/* adding button classes for icon */

.btn-seething-bazelgeuse {
  background: url('https://vignette.wikia.nocookie.net/fanonmonsterhunter/images/f/f8/Hail_Bazelgeuse_Render_by_3rdst123.png/revision/latest?cb=20200124041245');
  background-size: cover;
  background-position: center;
      background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-lucent-nargacuga {
  background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/lucent_nargacuga_temp_large_monsters_monster_hunter_rise_wiki_guide.png');
  background-size: cover;
  background-position: center;
      background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-furious-rajang {
  background: url('https://vignette.wikia.nocookie.net/monsterhunterwikiita/images/8/89/MHWI-Furious_Rajang_Render_001.png/revision/latest?cb=20200212154043&path-prefix=it');
  background-size: cover;
  background-position: center;
      background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-scorned-magnamalo {
  background: url('https://cdn02.nintendo-europe.com/media/images/08_content_images/games_6/nintendo_switch_7/nswitch_monsterhunterrise/MonsterHunterRise_Overview_HereTheyCome_Monster_Magnamalo.png');
  background-size: cover;
  background-position: center;
      background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}


.btn-aurora-somnacanth {
  background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/aurora-somnacanth-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
      background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-magma-almudron {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/magma-almudron-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-blood-orange-bishaten {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/blood-orange-bishaten-a-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-pyre-rakna-kadaki {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/pyre_rakna_kadaki_temp_large_monsters_monster_hunter_rise_wiki_guide.png');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-daimyo-hermitaur {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/daimyo_hermitaur_temp_large_monsters_monster_hunter_rise_wiki_guide.png');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-espinas {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/espinas_temp_large_monsters_monster_hunter_rise_wiki_guide.png');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-shagaru-magala {
    background: url('http://img2.wikia.nocookie.net/__cb20140124221245/monsterhunter/images/b/be/MH4-Shagaru_Magala_Render_001.png');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-gore-magala {
  background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/gore_magala_temp_large_monsters_monster_hunter_rise_wiki_guide.png');
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-shogun-ceanataur {
    background: url('https://vignette.wikia.nocookie.net/monsterhunterespanol/images/5/57/MHGen-Render_Shogun_Ceanataur.png/revision/latest?cb=20150903114813&path-prefix=es');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-astalos {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/astalos-a-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-seregios {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/seregios-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-garangolm {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/garangolm-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-lunagaron {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/lunagaron-large-monster-mhrise-wiki-guide.png');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-malzeno {
    background: url('https://oyster.ignimgs.com/mediawiki/apis.ign.com/monster-hunter-rise/8/82/Malzeno.png?width=960');
  background-size: cover;
  background-position: center;
        background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.btn-gold-rathian {
  background: url('https://vignette.wikia.nocookie.net/monsterhunter/images/c/c3/MHP3-Gold_Rathian_Render_001.png/revision/latest?cb=20140513043650');
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.7);
border: 1px solid white;
padding: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
margin-bottom: 20px;
}

.btn-silver-rathalos {
background: url('https://vignette1.wikia.nocookie.net/monsterhunter/images/a/a3/MHP3-Silver_Rathalos_Render_001.png/revision/latest?cb=20131228164651');
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.7);
border: 1px solid white;
padding: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
margin-bottom: 20px;  
}

.btn-flaming-espinas {
background: url('https://s.isanook.com/ga/0/rp/r/w728/ya0xa0m1w0/aHR0cHM6Ly9zLmlzYW5vb2suY29tL2dhLzAvdWQvMjMyLzExNjAyOTcvMTE2MDI5Ny0yMDIyMDkxNjEyMDAzOC0zNTNlYTY3LmpwZw==.jpg');
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.7);
border: 1px solid white;
padding: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
margin-bottom: 20px;  
}

.btn-violet-mizutsune {
background: url('https://www.wicurio.com/mhriseswitchaxe/index.php?plugin=ref&page=%E3%82%BF%E3%83%9E%E3%83%9F%E3%83%84%E3%83%8D%E5%B8%8C%E5%B0%91%E7%A8%AE&src=violet%20mizutsune.png');
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.7);
border: 1px solid white;
padding: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
margin-bottom: 20px;  
}

.btn-gaismagorm {
background: url('https://assets2.rockpapershotgun.com/gaismagorm-head.png/BROK/thumbnail/1600x900/format/jpg/quality/80/gaismagorm-head.png');
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.7);
border: 1px solid white;
padding: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
margin-bottom: 20px;  
}

.btn-risen-chameleos {
background: url('https://asset.vg247.com/monster-hunter-rise-sunbreak-new-08.jpg/BROK/resize/1920x1920%3E/format/jpg/quality/80/monster-hunter-rise-sunbreak-new-08.jpg');
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,0.7);
border: 1px solid white;
padding: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
margin-bottom: 20px;  
}
/* title update 3 */
.btn-risen-kushala {
  background: url('https://mlpnk72yciwc.i.optimole.com/cqhiHLc.IIZS~2ef73/w:auto/h:auto/q:75/https://bleedingcool.com/wp-content/uploads/2022/11/Monster-Hunter-Rise-Sunbreak-November-2022-Update-3.jpg');
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;  
  }


/* bottom half */
#back-button {
  position: absolute;
  height: 40px;
  width: 60px;
  text-align: center;
  z-index: 2;
  bottom: 20px;
  right: 20px;
  padding: 5px;
  color: white;
  text-shadow: 0 0 3px white, 0 0 6px purple;
  border: 1px solid purple;
  border-radius: 15px;
  box-shadow: 0 0 3px white, 0 0 6px purple;
  background: rgba(0,0,0,0.5);
}

#button-display {
    height: 100vh;
  width: 100vw;
  max-height: 800px;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


#btn-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}



#monster-selection {
  background-color: rgba(0,0,0,0.7);
  border: 1px solid white;
  padding: 15px;
  width: 300px;
  height: 80px;
  border-radius: 10px;
  margin-bottom: 20px;
  cursor: pointer;
}


/* giving each button a photo */

#btn-seething-bazelgeuse {
  background: url('https://vignette.wikia.nocookie.net/fanonmonsterhunter/images/f/f8/Hail_Bazelgeuse_Render_by_3rdst123.png/revision/latest?cb=20200124041245');
  background-size: cover;
  background-position: center;
}

#btn-lucent-nargacuga {
  background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/lucent_nargacuga_temp_large_monsters_monster_hunter_rise_wiki_guide.png');
  background-size: cover;
  background-position: center;
}

#btn-furious-rajang {
  background: url('https://vignette.wikia.nocookie.net/monsterhunterwikiita/images/8/89/MHWI-Furious_Rajang_Render_001.png/revision/latest?cb=20200212154043&path-prefix=it');
  background-size: cover;
  background-position: center;
}

#btn-scorned-magnamalo {
  background: url('https://cdn02.nintendo-europe.com/media/images/08_content_images/games_6/nintendo_switch_7/nswitch_monsterhunterrise/MonsterHunterRise_Overview_HereTheyCome_Monster_Magnamalo.png');
  background-size: cover;
  background-position: center;
}

#btn-aurora-somnacanth {
  background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/aurora-somnacanth-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
}

#btn-magma-almudron {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/magma-almudron-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
}

#btn-blood-orange-bishaten {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/blood-orange-bishaten-a-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
}

#btn-pyre-rakna-kadaki {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/pyre_rakna_kadaki_temp_large_monsters_monster_hunter_rise_wiki_guide.png');
  background-size: cover;
  background-position: center;
}

#btn-daimyo-hermitaur {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/daimyo_hermitaur_temp_large_monsters_monster_hunter_rise_wiki_guide.png');
  background-size: cover;
  background-position: center;
}

#btn-espinas {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/espinas_temp_large_monsters_monster_hunter_rise_wiki_guide.png');
  background-size: cover;
  background-position: center;
}

#btn-shagaru-magala {
    background: url('http://img2.wikia.nocookie.net/__cb20140124221245/monsterhunter/images/b/be/MH4-Shagaru_Magala_Render_001.png');
  background-size: cover;
  background-position: center;
}

#btn-gore-magala {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/gore_magala_temp_large_monsters_monster_hunter_rise_wiki_guide.png');
  background-size: cover;
  background-position: center;
}

#btn-shogun-ceanataur {
    background: url('https://vignette.wikia.nocookie.net/monsterhunterespanol/images/5/57/MHGen-Render_Shogun_Ceanataur.png/revision/latest?cb=20150903114813&path-prefix=es');
  background-size: cover;
  background-position: center;
}

#btn-astalos {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/astalos-a-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
}

#btn-seregios {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/seregios-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
}

#btn-garangolm {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/garangolm-large-monster-mhrise-wiki-guide-300.png');
  background-size: cover;
  background-position: center;
}

#btn-lunagaron {
    background: url('https://monsterhunterrise.wiki.fextralife.com/file/Monster-Hunter-Rise/lunagaron-large-monster-mhrise-wiki-guide.png');
  background-size: cover;
  background-position: center;
}

#btn-malzeno {
    background: url('https://oyster.ignimgs.com/mediawiki/apis.ign.com/monster-hunter-rise/8/82/Malzeno.png?width=960');
  background-size: cover;
  background-position: center;
}

#btn-gold-rathian {
  background: url('https://vignette.wikia.nocookie.net/monsterhunter/images/c/c3/MHP3-Gold_Rathian_Render_001.png/revision/latest?cb=20140513043650');
  background-size: cover;
  background-position: center;
}

#btn-silver-rathalos {
  background: url('https://vignette1.wikia.nocookie.net/monsterhunter/images/a/a3/MHP3-Silver_Rathalos_Render_001.png/revision/latest?cb=20131228164651');
  background-size: cover;
  background-position: center;
}

#btn-flaming-espinas {
  background: url('https://s.isanook.com/ga/0/rp/r/w728/ya0xa0m1w0/aHR0cHM6Ly9zLmlzYW5vb2suY29tL2dhLzAvdWQvMjMyLzExNjAyOTcvMTE2MDI5Ny0yMDIyMDkxNjEyMDAzOC0zNTNlYTY3LmpwZw==.jpg');
  background-size: cover;
  background-position: center; 
}

#btn-violet-mizutsune {
  background: url('https://www.wicurio.com/mhriseswitchaxe/index.php?plugin=ref&page=%E3%82%BF%E3%83%9E%E3%83%9F%E3%83%84%E3%83%8D%E5%B8%8C%E5%B0%91%E7%A8%AE&src=violet%20mizutsune.png');
  background-size: cover;
  background-position: center; 
}

#btn-gaismagorm {
  background: url('https://assets2.rockpapershotgun.com/gaismagorm-head.png/BROK/thumbnail/1600x900/format/jpg/quality/80/gaismagorm-head.png');
  background-size: cover;
  background-position: center; 
}

#btn-risen-chameleos {
  background: url('https://asset.vg247.com/monster-hunter-rise-sunbreak-new-08.jpg/BROK/resize/1920x1920%3E/format/jpg/quality/80/monster-hunter-rise-sunbreak-new-08.jpg');
  background-size: cover;
  background-position: center; 
}


/* title update 3 */
#btn-risen-kushala {
  background: url('https://mlpnk72yciwc.i.optimole.com/cqhiHLc.IIZS~2ef73/w:auto/h:auto/q:75/https://bleedingcool.com/wp-content/uploads/2022/11/Monster-Hunter-Rise-Sunbreak-November-2022-Update-3.jpg');
  background-size: cover;
  background-position: center; 
}


#btn-risen-teostra {
  background: url('https://res.cloudinary.com/lmn/image/upload/c_limit,h_360,w_640/e_sharpen:100/f_auto,fl_lossy,q_auto/v1/gameskinnyc/m/o/n/monster-hunter-rise-sunbreak-pure-dragon-blood-teostra-9e8de.jpg');
  background-size: cover;
  background-position: center; 
}

#btn-chaotic-gore {
  background: url('http://img1.wikia.nocookie.net/__cb20150131175033/mogapedia/fr/images/7/76/MH4U-Chaos_Gore_Magala_Render_001.png');
  background-size: cover;
  background-position: center; 
}